<script setup lang="ts">
import {menuItems, setActiveCTF} from "@/static/CTF_topic/CTF_topic";
import '@/style/CTF_topic.css'

</script>

<template>
  <div class="ctf-all">
    <el-container>
      <el-aside class="ctf-aside">
        <div class="ctf-aside-title">
          <span>CTF Topic</span>
        </div>

        <div class="ctf-aside-menu">
          <div
              v-for="item in menuItems"
              :key="item.name"
              class="ctf-aside-content">
            <i :class="{'is-active': item.isActive}"
                @click="setActiveCTF(item)">
              <span>{{ item.name }}</span>
            </i>
          </div>
        </div>

      </el-aside>

      <el-main class="ctf-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>